<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        warning: '#F59E0B',
                        info: '#6366F1',
                        light: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
            }
            .text-shadow {
                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen font-inter">
    <div class="flex items-center justify-center min-h-screen px-4 sm:px-6 lg:px-8">
        <div class="w-full max-w-md space-y-8">
            <div class="text-center">
                <div class="flex justify-center">
                    <div class="bg-gradient-primary w-16 h-16 rounded-full flex items-center justify-center shadow-lg transform hover:scale-105 transition-custom">
                        <i class="fa fa-user-circle text-white text-3xl"></i>
                    </div>
                </div>
                <h2 class="mt-6 text-3xl font-bold text-gray-900">
                    登录系统
                </h2>
                <p class="mt-2 text-sm text-gray-600 max-w">
                    请输入您的用户名和密码
                </p>
            </div>
            <form id="loginForm" class="mt-8 space-y-6" action="controller\login.php" method="POST">
                <div class="rounded-md shadow-sm -space-y-px">
                    <div class="mb-4">
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
                            用户名
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input id="username" name="username" type="text" required 
                                class="focus:ring-primary focus:border-primary block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg shadow-sm transition-custom 
                                focus:outline-none focus:ring-2 focus:ring-offset-2"
                                placeholder="请输入用户名">
                        </div>
                        <p id="usernameError" class="mt-1 text-danger text-sm hidden"></p>
                    </div>
                    
                    <div class="mb-4">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                            密码
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input id="password" name="password" type="password" required 
                                class="focus:ring-primary focus:border-primary block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg shadow-sm transition-custom 
                                focus:outline-none focus:ring-2 focus:ring-offset-2"
                                placeholder="请输入密码">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <button type="button" id="togglePassword" class="text-gray-400 hover:text-gray-600">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                        </div>
                        <p id="passwordError" class="mt-1 text-danger text-sm hidden"></p>
                    </div>
                    
                    <div class="mb-4">
                        <label for="captcha" class="block text-sm font-medium text-gray-700 mb-1">
                            验证码
                        </label>
                        <div class="flex space-x-3">
                            <div class="relative flex-1">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-shield text-gray-400"></i>
                                </div>
                                <input id="captcha" name="captcha" type="text" required  class="focus:ring-primary focus:border-primary block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg shadow-sm transition-custom focus:outline-none focus:ring-2 focus:ring-offset-2"  placeholder="请输入验证码">
                            </div>
                            <div class="w-32 h-12 rounded-lg overflow-hidden border border-gray-300 shadow-sm">
                                <img id="captchaImage" src="lib/captcha.php" alt="验证码图片" class="w-full h-full object-cover">
                            </div>
                        </div>
                        <div class="flex items-center justify-between mt-1">
                            <p id="captchaError" class="text-danger text-sm hidden"></p>
                            <button type="button" id="refreshCaptcha" class="text-primary text-sm hover:underline flex items-center">
                                <i class="fa fa-refresh mr-1"></i> 刷新验证码
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="remember" class="ml-2 block text-sm text-gray-900">
                            记住我
                        </label>
                    </div>
                    
                    <div class="text-sm">
                        <a href="register.html" class="font-medium text-primary hover:text-primary/80 transition-custom">
                            去注册账户
                        </a>
                    </div>
                </div>
                
                <div>
                    <button type="button" id="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg
                        bg-gradient-primary text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-custom 
                        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                            <i class="fa fa-sign-in text-white/80 group-hover:text-white transition-custom"></i>
                        </span>
                        登录
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        $(function(){
            //切换密码可见
            $("#togglePassword").on("click",function(){
                if($("#password").attr('type') == 'password'){
                    $("#password").attr('type',"text");
                    $("#togglePassword i").removeClass("fa-eye-slash")
                    $("#togglePassword i").addClass("fa-eye")
                }else{
                    $("#password").attr('type',"password");
                    $("#togglePassword i").removeClass("fa-eye")
                    $("#togglePassword i").addClass("fa-eye-slash")
                }
            })
            //刷新验证码
            $("#refreshCaptcha").on("click",function(){
                $("#captchaImage").attr("src",'lib/captcha.php?' + new Date().getTime());
                $("#captcha").val("");
                $("#captchaError").addClass("hidden");
            })

            //登录
            $("#submit").on("click",function(){
                var data = {}
                $("#loginForm").serializeArray().forEach(function(item){
                    data[item.name] = item.value;
                })
                //验证用户
                if(data.username == ""){
                    alert("请输入用户名")
                    $("#username").focus();
                    return false;
                }
                //验证密码是否输入
                if(data.password == ""){
                    alert("请输入密码");
                    $("#password").focus()
                    return false;
                }
                //请输入验证码
                if(data.captcha == ""){
                    alert("请输入验证码")
                    $("#captcha").focus()
                    return false;
                }
                $.post("controller/login.php",{data:data},function(e){
                    e =  JSON.parse(e);
                    console.log(e);
                    alert(e.msg);
                    if(e.code){
                        location.href = "index.html"
                    }
                })
            })
            //为回车键绑定键盘按下事件
            $(document).on("keydown",function (event) {
                var e = event || window.event;
                if (e && e.keyCode == 13) { //回车键的键值为13
                    $("#submit").click();   //调用登录按钮的单击事件
                }
            });
        })
    </script>
</body>
</html>